/*
 * @Description: 个人博客
 * @Author: ZhangHan
 * @Date: 2025-07-24 14:25:00
 * @LastEditTime: 2025-07-24 16:47:57
 * @LastEditors: ZhangHan
 */

import "./index.less";
import { useRef } from "react";
import { Layout, FloatButton, Button } from "antd";
const { Header, Content, Footer } = Layout;
function PersonalBlog() {
  const headerRef = useRef(null);

  const headerStyle: React.CSSProperties = {
    height: 64,
    paddingInline: 72,
    backgroundColor: "#F8FAFC",
  };

  const contentStyle: React.CSSProperties = {
    minHeight: 120,
    overflowY: "scroll",
    scrollbarWidth: "none",
    paddingLeft: 120,
    paddingRight: 120,
  };

  const footerStyle: React.CSSProperties = {
    textAlign: "center",
    color: "#fff",
    backgroundColor: "#4096ff",
  };

  const layoutStyle = {
    borderRadius: 8,
    backgroundColor: "#F8FAFC",
  };

  // 跳转博客主页
  const handleGoHome = () => {
    window.location.href =
      "https://blog.csdn.net/a3212768093?spm=1010.2135.3001.5421";
  };

  return (
    <>
      <Layout style={layoutStyle}>
        {/* ---------------------------------- */}
        <Header className="shadow-md" style={headerStyle}>
          <div className="flex items-center justify-between">
            <div className="font-bold text-primary">技术探索者</div>
            <nav className="flex items-center space-x-8">
              <a
                href="#home"
                className="font-medium hover:text-primary transition-colors"
              >
                首页
              </a>
              <a
                href="#articles"
                className="font-medium hover:text-primary transition-colors"
              >
                文章
              </a>
              <a
                href="#projects"
                className="font-medium hover:text-primary transition-colors"
              >
                项目
              </a>
              <a
                href="#skills"
                className="font-medium hover:text-primary transition-colors"
              >
                技能
              </a>
              <a
                href="#about"
                className="font-medium hover:text-primary transition-colors"
              >
                关于我
              </a>
            </nav>
          </div>
        </Header>
        {/* ---------------------------------- */}
        <Content className="site-layout-background" style={contentStyle}>
          {/* 探索 */}
          <div className="flex items-center justify-between">
            <div className="flex-1 py-4">
              <div className="font-bold  text-balance mb-1">
                探索<span className="text-primary">前端技术</span>的无限可能
              </div>
              <p className="text-gray-600 dark:text-gray-300 max-w-lg">
                前端开发工程师，专注于React、Vue、Taro、uni-app等前端前沿技术，分享技术经验与最佳实践。
              </p>
              <div className="mt-1">
                <Button onClick={handleGoHome} type="primary" size="middle" className="mr-1">
                  浏览文章
                </Button>
                <Button size="middle">查看项目</Button>
              </div>
            </div>
            <div className="flex-1 py-4 flex items-center justify-center">
              <img
                style={{ width: "400px",height:'280px' }}
                src="https://picsum.photos/seed/developer/600/400"
                alt="开发者工作环境"
                className="rounded-2xl shadow-2xl animate-floatY"
              />
            </div>
          </div>
          {/* 专业技能 */}
          <div style={{ height: "1000px" }}>1</div>
          <div style={{ height: "1000px" }}>1</div>
          <FloatButton.BackTop
            visibilityHeight={50}
            target={() =>
              document.querySelector(".site-layout-background") as HTMLElement
            }
          />
        </Content>
        <Footer style={footerStyle}>版权信息--CSDN@&nbsp;编程猪猪侠</Footer>
      </Layout>
    </>
  );
}

export default PersonalBlog;
